<template>
  <div class="permission-page">
    <div class="header">
      <div>
        <span style="font-size: 20px">权限</span>
      </div>
      <div>
        <el-form :inline="true" :model="form" size="mini">
          <el-form-item label="">
            <el-input v-model="form.Path" placeholder="请输入路径"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div>
      <el-table :data="data" style="width: 100%" height="700" stripe>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="Name" label="名称"> </el-table-column>
        <el-table-column prop="Path" label="相对路径"> </el-table-column>
        <el-table-column prop="" label="操作">
          <template v-slot="{ row }">
            <el-button @click="onView(row)" size="mini">查看权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-drawer
        title=""
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose"
        size="40%"
      >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="组权限" name="组">
            <el-form ref="groupForm" :model="groupForm" label-width="90px">
              <el-form-item label="组名/用户名">
                <!-- <el-input v-model="groupForm.ViewableName"></el-input> -->
                <el-select
                  v-model="groupForm.ViewableID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="ele in GroupList"
                    :key="ele.ID"
                    :label="ele.GroupName"
                    :value="ele.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="路径">
                <el-input v-model="groupForm.FolderPath"></el-input>
              </el-form-item>
              <el-form-item label="只读">
                <el-switch v-model="groupForm.ReadOnly"></el-switch>
              </el-form-item>
              <el-form-item label="PDF可见">
                <el-switch v-model="groupForm.IsPDFViewable"></el-switch>
              </el-form-item>
              <el-form-item label="SMG可见">
                <el-switch v-model="groupForm.IsSMGViewable"></el-switch>
              </el-form-item>
              <el-form-item label="STEP可见">
                <el-switch v-model="groupForm.IsSTEPViewable"></el-switch>
              </el-form-item>
              <el-form-item label="DWG可见">
                <el-switch v-model="groupForm.IsDWGViewable"></el-switch>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="groupForm.Notes"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" @click="onSave">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="用户权限" name="用户">
            <el-form ref="groupForm" :model="groupForm" label-width="90px">
              <el-form-item label="组名/用户名">
                <!-- <el-input v-model="groupForm.ViewableName"></el-input> -->
                <el-select
                  v-model="groupForm.ViewableID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="ele in Userlist"
                    :key="ele.ID"
                    :label="ele.GroupName"
                    :value="ele.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="路径">
                <el-input v-model="groupForm.FolderPath"></el-input>
              </el-form-item>
              <el-form-item label="只读">
                <el-switch v-model="groupForm.ReadOnly"></el-switch>
              </el-form-item>
              <el-form-item label="PDF可见">
                <el-switch v-model="groupForm.IsPDFViewable"></el-switch>
              </el-form-item>
              <el-form-item label="SMG可见">
                <el-switch v-model="groupForm.IsSMGViewable"></el-switch>
              </el-form-item>
              <el-form-item label="STEP可见">
                <el-switch v-model="groupForm.IsSTEPViewable"></el-switch>
              </el-form-item>
              <el-form-item label="DWG可见">
                <el-switch v-model="groupForm.IsDWGViewable"></el-switch>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="groupForm.Notes"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" @click="onSave">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { getViewPermissionApi, GetallDirectoryApi } from "@/api/permission";
import { SettingApi } from "@/api/dashboard";
import { getUserList, getGroupList, getUserInfo } from "@/api/user";
export default {
  data() {
    return {
      data: [],
      form: {
        Path: "",
      },
      queryData: {
        filepath: "",
        mark: "组",
        viewid: "",
      },
      drawer: false,
      activeName: "组",
      groupForm: {
        ViewableName: "",
        ViewableID: "",
        FolderPath: "",
        ReadOnly: false,
        IsPDFViewable: false,
        IsSMGViewable: false,
        IsSTEPViewable: false,
        IsDWGViewable: false,
        Mark: "",
        Notes: "",
      },
      userForm: {},
      GroupList: [],
      Userlist: [],
      queryUserData: {
        number: 10, //每页数量
        intPage: 1, //当前页
        TrueName: "", //真实姓名
        GroupID: -1, //组ID
        Email: "", //邮箱
      },
      queryGroupData: {
        groupnumber: 10,
        groupintPage: 1,
      },
    };
  },
  created() {
    // this.getViewPermission();
    this.GetallDirectory();
  },
  methods: {
    async GetallDirectory() {
      const res = await GetallDirectoryApi({
        postpara: {
          posttype: "GetallDirectory",
        },
        Path: "",
      });
      console.log(res);
      this.data = res.data.FolderList;
    },
    async getUserListAPI() {
      const res = await getUserList(this.queryUserData);
      console.log(res);
      // this.total = res.data.total;
      this.Userlist = res.data.rows;
    },
    async getGroupListAPI() {
      const res = await getGroupList(this.queryGroupData);
      console.log(res);
      // this.total1 = res.data.total;
      this.GroupList = res.data.rows;
    },
    async onView(row) {
      // console.log(row);
      this.getUserListAPI();
      this.getGroupListAPI();
      this.queryData.filepath = row.Path;
      this.queryData.viewid = row.Id;

      const res = await getViewPermissionApi(this.queryData);
      console.log(res);
      this.groupForm = res.data;
      this.drawer = true;
    },
    async onSave() {
      const res = await SettingApi({
        postpara: {
          posttype: "saveViewPermission",
        },
        issub: 1,
        ureentity: {
          ...this.groupForm,
        },
      });
      console.log(res);
      const data = JSON.parse(res.data);
      if (data.Result) {
        this.$message.success(data.Message);
      } else {
        this.$message.error(data.Message);
      }
      this.handleClose();
    },

    async onSearch() {
      const res = await GetallDirectoryApi({
        postpara: {
          posttype: "GetallDirectory",
        },
        Path: this.form.Path,
      });
      console.log(res);
      this.data = res.data.FolderList;
    },
    handleClose() {
      this.GetallDirectory();
      this.drawer = false;
    },
    async handleClick(tab) {
      console.log(tab.name);
      this.queryData.mark = tab.name;

      const res = await getViewPermissionApi(this.queryData);
      console.log(res);
      this.groupForm = res.data;
      this.groupForm.Mark = tab.name;
    },
  },
};
</script>

<style lang="scss" scoped>
.permission-page {
  background-color: #fff;
  padding: 20px;

  .header {
    padding-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
}

::v-deep .el-drawer__body {
  padding: 0 20px;
}
</style>